<template>
	<div >
	  <div class="head"><img class="jiant" src="../../assets/书城/shape_u112.png" alt="" srcset="">全部评论 (8)</div>
	  <img src="../../assets/书城/分割线_u3221.png" alt="" srcset="">
	  <ul>
		  <li v-for="(value,key,index) in books" :key="index">
		  <img class="img1" :src="value.img" alt="">
			 <div class="right"><p class="name">{{value.name}}</p><br>
			  <p class="title">{{value.title}}</p>
            <div class="dianz"> <div class="time">{{value.time}}</div><div class="dz" ><div><img class="img2" :src="value.img2" alt=""><span class="num">{{value.num}} </span></div>
             <div><img class="img3" :src="value.img3" alt=""> <span class="num2">{{value.num2}}</span></div></div></div></div>
             <img class="img4" :src="value.img4" alt=""></li>
	  </ul>
	</div>
  </template>
  
  <script>
  export default {
  data(){
	  return{
		  books:{
			  comments:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  },
              comments2:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  },
              comments3:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  },
              comments4:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  },
              comments5:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  },
              comments6:{
				  name:'西瓜',
				  title:'我们知道自己在重复相同的痛苦，只是愈来愈深，但可知无数次的重复也让痛苦变得可笑？重复人类生命吗？',
				  img:require('@/assets/书城/用户头像_u2484.png'),
				  time:'12-04 21:20',
                  img2:require('@/assets/书城/u2490.png'),
                  num:"330",
                  img3:require('@/assets/书城/u2494.png'),
                  num2:"3",
                  img4:require('@/assets/书城/分割线_u3221.png'),
			  }
			 
		  }
	  }
  }
  }
  </script>
  
  <style lang="less" scoped>
  .head{font-size: 2rem;
        margin-right: 4rem;
	  line-height: 5rem;
	  width: 100%;
	  height: 5rem;
	  text-align: center;
	  position: relative;
	  .jiant{margin:2rem;
        float: left;box-sizing: border-box;
	  }
  }
  ul{
	  li{overflow: hidden;
		 .img1{float: left;
            margin:1.5rem  2rem;
            border-width: 0px;
            vertical-align: middle;
//  
    width: 30px;
    height: 30px;
         }
		  
		 
			  .name{font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
    text-align: left;
    line-height: 2.2rem;margin-top: 2rem;
   }
  .title{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    color: #999999;
    text-align: left;
    width: 90%;
}
	  
  }
  
		 
	  }
  .right{float: left;
    text-align: left;
    width: 78%;margin-right: 1.2rem;
  }
 .dianz{display: inline-block;width:100%;
    .time{   margin-top: 1.5rem;  font-family: 'PingFangSC-Regular', 'PingFang SC';
	  font-weight: 400;
	  font-style: normal;
	  font-size: 12px;
	  color: #999999;
	 
	 
  
   }
    div{
    display: inline-block;
 }
    
   
    .dz{margin-top: 1.5rem;
      float: right;
      margin-right: 3rem;
      div{margin-left: 1rem;}
    }
 }
  </style>